<template>
  <div>
    <el-dialog ref="checkRef" title="核算" :visible.sync="dialogVisible" append-to-body :before-close="beforeClose" width="1200px">
      <el-tabs v-model="activeName" v-if="dialogVisible">
        <el-tab-pane label="核算信息" name="核算信息">
          <div class="card-box" style="padding:0">
            <div class="card-title">待生成其它款项</div>
            <el-table :data="tableData" align="left">
              <el-table-column prop="costMonth" label="账单月份" sortable width="180">
                <template slot-scope="scope">{{scope.row.costMonth|shortMonth}}</template>
              </el-table-column>
              <el-table-column prop="chargeProjectName" label="收费项目" />
              <el-table-column prop="costPeriodStart" label="费用周期">
                <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
              </el-table-column>
              <el-table-column prop="receivableDate" label="应收日期" />
              <el-table-column prop="receivableMoney" label="应收金额(元)" :formatter="priceFormatter" />
            </el-table>
            <div class="card-title">待生成租金</div>
            <el-table :data="tableData1" style="width: 100%;margin-bottom: 20px;" row-key="receivableId" :default-expand-all="false" :tree-props="{children: 'receivableList', hasChildren: 'hasChildren'}">
              <el-table-column prop="costMonth" label="费用月份" sortable width="180">
                <template slot-scope="scope">{{scope.row.costMonth|shortMonth}}</template>
              </el-table-column>
              <el-table-column prop="chargeProjectName" label="收费项目" />
              <el-table-column prop="costPeriodStart" label="费用周期">
                <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
              </el-table-column>
              <el-table-column prop="receivableDate" label="应收日期" />
              <el-table-column prop="receivableMoney" label="应收金额(元)" :formatter="priceFormatter" />
            </el-table>
            <div class="card-title">已生成费用</div>
            <el-table :data="tableData2" style="width: 100%;margin-bottom: 20px;">
              <el-table-column prop="costMonth" label="费用月份" sortable width="180">
                <template slot-scope="scope">{{scope.row.costMonth|shortMonth}}</template>
              </el-table-column>
              <el-table-column prop="chargeProjectName" label="收费项目" />
              <el-table-column prop="costPeriodStart" label="费用周期">
                <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
              </el-table-column>
              <el-table-column prop="receivableDate" label="应收日期" />
              <el-table-column prop="receivableMoney" label="应收金额(元)" :formatter="priceFormatter" />
            </el-table>
          </div>
          <div>
            <p>注：确认合同准确无误，点击审核通过生成合同应收；如果合同有误，点击退回租赁合同。</p>
          </div>
        </el-tab-pane>
        <!-- 合同信息 -->
        <el-tab-pane label="合同信息" name="合同信息">
          <contractInformation ref="contractInformation"></contractInformation>
        </el-tab-pane>
        <!-- 附件 -->
        <el-tab-pane label="附件" name="附件">
          <v-upload type="file" v-if="activeName==='附件'" ref="rentContractFileUpload" :busId="form.busId" modelType="rent-contract" autoLoadFiles :isShowFileList="true" :isView="true" />
        </el-tab-pane>
      </el-tabs>

      <span slot="footer">
        <el-button size="small" @click="returned">退回合同</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
        <el-button size="small" type="primary" v-throttle="[account]">审核通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import contractInformation from "@/views/wy-rent/contract/components/contractInformation";
import { check, checkSubmit, generateProFee, fetchList } from '@/views/wy-rent/api/rent-contract-acceptance.js'

import BaseLoad from '@/assets/vue-mixin/BaseLoad'
export default {
  mixins: [BaseLoad],
  components: { engineerList, contractInformation },
  data () {
    return {
      activeName: '核算信息',
      dialogVisible: false,
      tableData: [],
      tableData1: [],
      tableData2: [],
      form: {
        remarks: "",
        busId: "",
      },
    }
  },

  methods: {
    show (item) {
      this.dialogVisible = true
      this.activeName = '核算信息'
      setTimeout(() => {
        if (item) {
          this.form.busId = item.rentContractId;
          generateProFee(item.rentContractId).then(res => {
            this.tableData = res.data.data
          });
          //待生成费用
          check(item.rentContractId).then(res => {
            this.tableData1 = res.data.data
          });

          //已生成费用
          fetchList({ rentContractId: item.rentContractId, size: 200 }).then(
            (res) => {
              this.tableData2 = res.data.data.records;
            }
          )
          //合同信息
          if (this.$refs.contractInformation) {
            this.$refs.contractInformation.loadContractList(item.rentContractId);
          }
        }
      }, 200)
    },
    returned () {
      this.$prompt('请填写退回原因', '退回原因', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '退回原因不能为空'
      }).then(({ value }) => {
        this.form.remarks = value
        const obj = {
          approvalResult: '03',
          opinion: '退回'
        }
        checkSubmit({ ...this.form, ...obj }).then(resp => {
          if (resp.data.data) {
            this.$message({
              type: 'success',
              message: '合同已退回经营部！'
            });
            this.dialogVisible = false;
            this.$emit('resetList')
            this.$emit('getTabListData')
            this.$forceUpdate()
          } else {
            this.err('操作失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    account () {
      // this.dialogVisible1 = true
      this.dialogVisible = true
      this.$confirm('是否确定合同数据已通过审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadAction('请稍等...')
        const obj = {
          approvalResult: '02',
          opinion: '同意'
        }
        checkSubmit({ ...this.form, ...obj }).then(resp => {
          if (resp.data.data) {
            this.$message({
              type: 'success',
              message: '合同数据已审核通过！'
            });
            this.dialogVisible = false;
            this.$emit('resetList')
            this.$emit('getTabListData')
            this.loadClose()
          } else {
            this.err('操作失败')
            this.loadClose()
          }
        })
      }).catch((e) => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    beforeClose (done) {
      done();
    }
  }
}
</script>

<style lang='scss' scoped>
@include data-title();
@include info-list(2);
@include formWrap(3);
</style>
